<template>
      <div class="downLoad" v-if="show">
        <van-row class="down">
            <van-col class="img" span="4">
                <img src="../assets/logo.png" alt="">
            </van-col>
            <van-col span="14">
                <h3>快读小说</h3>
                <p>快读免费小说，永久免费阅读</p>
            </van-col>
            <van-col span="6">
                <van-button type="info">下载APP</van-button>
            </van-col>
        </van-row>
        <div class="close" @click='clear'>
          <van-icon name="cross" color='#ccc' size='.3rem'/>
        </div>
      </div>
</template>
<script>
export default {
    name:'DownLoad',
    data(){
      return {
        show:this.$store.state.total.close
      }
    },
    methods:{
      clear(){
        this.$store.commit('changeLimit', false)
        this.show=this.$store.state.total.close
      }
    }
}
</script>
<style scoped lang='stylus'>
.downLoad
  position fixed
  bottom 0
  width 100%
  overflow hidden
.down
  padding .2rem
  background-color rgba(0,0,0,.5)
  height 1rem
  text-align center
  >>> .img.van-col
    justify-content flex-start
  img 
    width .7rem
  h3,p
    width 100%
    text-align left
    line-height .42rem
    font-size .32rem
    color #2f94f9
  p
    color #999
    font-size .24rem
  .van-button
    width 1.39rem
    height .56rem
    font-size .22rem
    background-color #2494f9
    padding 0
  .van-col
    height 100%
    display flex
    flex-wrap wrap
    justify-content center
    align-items center
    &:last-child
      justify-content flex-end
.close
  width .4rem
  height .4rem
  border-radius 50%
  position absolute
  right -0.1rem
  top -.1rem
  background-color #000
  .van-icon
    position absolute
    top .1rem
</style>